<template>
  <BaseContent class="HomeView">
    <div class="card">  
        <div class="card-body">  
            <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">  
                <div class="carousel-inner">  
                    <div class="carousel-item active">  
                        <img src="../assets/longzihu.png" class="d-block w-100" alt="...">  
                    </div>  
                    <div class="carousel-item">  
                        <img src="../assets/yingcai.png" class="d-block w-100" alt="...">  
                    </div>  
                    <div class="carousel-item">  
                        <img src="../assets/room1.png" class="d-block w-100" alt="...">  
                    </div>  
                    <div class="carousel-item">  
                        <img src="../assets/room2.png" class="d-block w-100" alt="...">  
                    </div>  
                    <div class="carousel-item">  
                        <img src="../assets/room3.png" class="d-block w-100" alt="...">  
                    </div>  
                </div>  
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">  
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>  
                    <span class="visually-hidden">Previous</span>  
                </button>  
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">  
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>  
                    <span class="visually-hidden">Next</span>  
                </button>  
            </div>  
        </div>  
    </div>  


      <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            最受学生欢迎八本书
          </button>
          <ul class="dropdown-menu" style="background-color: rgba(128, 128, 128, 1); color: white;">
            <li v-for="book_ranking in book_rankings" :key="book_ranking.id">
              <a class="dropdown-item" href="#">{{ book_ranking.author }}：{{ book_ranking.title }}</a>
            </li>
          </ul>
        </div>
      </div>


      <div class="card card-books-infomation">
        <div class="card-body">
          <div class="card mb-3 ranking_book_card" style="max-width: 540px;" v-for="book_ranking in book_rankings" :key="book_ranking.id">
            <div class="row g-0">
              <div class="col-md-4">
                <img :src="book_ranking.photo" class="book_ranking_photo img-fluid rounded-start" alt="...">
              </div>
              <div class="col-md-8">
                <div class="card-body">
                  <h5 class="card-title">{{ book_ranking.title }}</h5>
                  <h6>{{ book_ranking.author }}</h6>
                  <p class="card-text" style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;">{{ book_ranking.description }}</p>
                  <button type="button" class="btn btn-danger" @click="to_understand_book(book_ranking.id, book_ranking.stock, book_ranking.score, book_ranking.title, book_ranking.photo, book_ranking.description, book_ranking.author, book_ranking.book_type, book_ranking.awarded)">去了解图书详情</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-body">
          <div class="friend">
            友情链接：
            <span>
              <a href="http://www.lib.cau.edu.cn/">中国农业大学图书馆</a>
            </span>
            <span>
              <a href="http://lib.zzu.edu.cn/">郑州大学大学图书馆</a>
            </span>
            <span>
              <a href="https://lib.henu.edu.cn/">河南大学图书馆</a>
            </span>
            <span>
              <a href="https://lib.zzuli.edu.cn/">郑州轻工业大学图书馆</a>
            </span>
            <span>
              <a href="https://lib.henau.edu.cn/">河南农业大学图书馆</a>
            </span>
            <span>
              <a href="https://www.nstl.gov.cn/">NSTL中心</a>
            </span>
          </div>
       </div>
    </div>
  </BaseContent>
  <div class="introduce">
      <div class="introduce_team">
          <div>强烈建议您使用IE8.0以上，屏幕分辨率1000*1024以上，真彩，小字体浏览</div>
          <div>联系电话：0371-86176066 邮箱：lib@hnuahe.edu.cn Copyright © 2016-2020 hnuahelib All Rights Reserved</div>
          <div>河南牧业经济学院图书馆欢迎您!</div>
      </div>
  </div>
</template>

<script>
import BaseContent from '@/components/BaseContent.vue';
import { reactive, ref } from 'vue';
import $ from 'jquery';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import dayjs from 'dayjs';
export default {
  name: "HomeView",
  components: {
      BaseContent
  },
  setup() {
    const router = useRouter();
    const store = useStore();
    const book_rankings = ref([]);
    const book_user_ranking = reactive({});
    const formattedDate = dayjs().format('YYYY-MM-DD HH:mm:ss');
    let times = 0;
    $.ajax({
        url: 'http://47.121.28.202:8000/settings/getranking/',
        type: "GET",
        success(resp) {
            // console.log(store.state.user.id);
            for (let i of resp) {
              if(times < 8) {
                book_rankings.value.push(i);
                times ++;
              }
              else {
                break
              }
            }
        }
    })
    $.ajax({
      url: "http://47.121.28.202:8000/settings/ranking/",
      type: "GET",
      headers: {
          'Authorization': "Bearer " + store.state.user.access,
      },
      data: {
          user_id: store.state.user.id,
      },
      success(resp) {
          book_user_ranking.count = resp.length,
          book_user_ranking.book_user_ranking = resp;
      }
    })
    const to_understand_book = (bookid, bookstock, bookscore, booktitle, bookphoto, bookdescription, bookauthor, booktype, bookawarded) => {
        add_score(booktitle, bookid, bookphoto, bookdescription, bookauthor, booktype, bookawarded, bookscore);
        if (store.state.user.is_login) {
          $.ajax({
              url: 'http://47.121.28.202:8000/settings/getbooks/',
              type: "PATCH",
              data: {
                  book_id: bookid,
                  stock: bookstock,
                  score: bookscore + 3,
              },
          })
          router.push({
            name: 'bookinfo',
            params: {
              bookid
            }
          })
        }
        else {
          router.push({
            name: 'login',
          })
        }
    };
    const add_score = (booktitle, bookid, bookphoto, bookdescription, bookauthor, booktype, bookawarded, bookscore) => {
        const is_have_the_book = ref(false);
        for (let i of book_user_ranking.book_user_ranking) {
            if(i.book_title === booktitle) {
              is_have_the_book.value = true; 
            }
        }
        
        if (is_have_the_book.value) {
            $.ajax({
                url: 'http://47.121.28.202:8000/settings/ranking/',
                type: "PATCH",
                headers: {
                    'Authorization': "Bearer " + store.state.user.access,
                },
                data: {
                    book_score: parseInt(bookscore) + 5,
                    book_id: bookid,
                    user_id: store.state.user.id,
                    visittime: formattedDate,
                }
            })
        } else {
            $.ajax({
                url: 'http://47.121.28.202:8000/settings/ranking/',
                type: "POST",
                headers: {
                    'Authorization': "Bearer " + store.state.user.access,
                },
                data: {
                    user_id: store.state.user.id,
                    book_id: bookid,
                    book_title: booktitle,
                    user_username: store.state.user.username,
                    visittime: formattedDate,
                    photo: bookphoto,
                    description: bookdescription,
                    author: bookauthor,
                    book_type: booktype,
                    book_awarded: bookawarded,
                },
                success(resp) {
                  console.log(resp);
                  $.ajax({
                      url: 'http://47.121.28.202:8000/settings/ranking/',
                      type: "PATCH",
                      headers: {
                          'Authorization': "Bearer " + store.state.user.access,
                      },
                      data: {
                          book_score: 5,
                          book_id: bookid,
                          user_id: store.state.user.id,
                          visittime: formattedDate,
                      },
                  })
                }
            })
        }
    }
    return {
      book_rankings,
      to_understand_book,
      add_score
    }
  }
}
</script>

<style scoped>
.d-block {
  height: 300px;
}
.Picks {  
  display: flex; 
  flex-wrap: nowrap; 
  justify-content: space-around;
} 
.btn-group {
  margin-left: 7px;
}
a {
  text-decoration: none;
  color: black;
  margin-right: 10px;
}
.friend {
  font-weight: 600;
}
.introduce {
  width: 100%;
  height: 100px;
  background-color: #834413;
}
.introduce_team {  
  color: white;
  display: flex; /* 设置为Flex容器 */  
  flex-direction: column; /* 设置为列方向，这样所有子元素都会垂直堆叠 */  
  justify-content: center; /* 垂直居中（在这个上下文中实际上是水平居中，因为flex-direction是column） */  
  align-items: center; /* 水平居中（在这个上下文中实际上是垂直居中） */  
  height: 100%; /* 或者你想要的任何具体高度，确保容器有高度 */  
  text-align: center; /* 确保文本在行内也居中（对于单行文本很有用） */  
}
.ranking_book_card {
  display: inline-block;
  height: 300px;
  width: 600px;
  margin: 15px;
  position: relative;
  left: 40px;
}
.book_ranking_photo {
  height: 300px;
}
.btn-danger {
  width: 100%;
}
.HomeView {
  user-select: none;
}

</style>